import React,{ useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { getToken } from '@/utils';
import {AtProgress} from 'taro-ui'
import { View, Text,Image,Button,ContactButton } from '@tarojs/components'
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/progress.scss";
import './index.less'

export default function Mine() {
  let capsule = {}
  if(process.env.TARO_ENV === 'weapp') capsule = Taro.getMenuButtonBoundingClientRect()

  const [userinfo,setUserInfo] = useState({})
  const [userMember,setUserMember] = useState({})
  const [assets,setAssets] = useState({})
  const [plusInfo,setplusInfo] = useState({})
  const [cardNum,setCardNum] = useState(0)
  const [loginTxt,setLoginTxt] = useState('登录/注册')
  useDidShow(()=>{
    setUserInfo(Taro.getStorageSync('user') || {})
    Taro.$get('/wallet/user/myAccountProperty').then(res=>{  // /  资产
      setAssets(res.content)
    })
    Taro.$get('/wallet/paid/myMember').then(res=>{  // /  
      setplusInfo(res.content)
    })
    // Taro.$get('/wallet/user/member/value?businessType=CINEMA').then(res=>{
    //   setUserMember(res.content)
    // })
    Taro.$get('/cinema-app/api/card/getMyCardNum',{cinemaId:Taro.getStorageSync('merchantId')}).then(res=>{
      setCardNum(res.content)
    })
    if(process.env.TARO_ENV === 'tt'){
      setLoginTxt('抖音登录/注册')
    }
  })
  const handleToUrl = (url)=>{  //  跳转路由
    Taro.navigateTo({
      url
    })
  }
  const handleToOrder = e=>{
    Taro.verifyLogin()
    Taro.navigateTo({
      url:`/orderSubPack/order-list/index?status=${e}`
    })
  }
  
  return (
    <View className="mine">
      <Image src={require('@/images/mine/header-bg.svg')} className='mine-bg' mode='widthFix'></Image>
      <View className="mine-header" style={{paddingTop:capsule.top+capsule.height+'PX'}}>
        {userinfo.token?
        <View className="header-box" onClick={()=>{
          Taro.verifyLogin();
          handleToUrl('/mineSubPack/information/index')
        }}>
          <Image className="header-img" src={userinfo.avatar} mode="aspectFill"></Image>
          <View className="header-title">
            <View className='h2'>{userinfo.nickName}</View>
            {/* <View style={{marginTop: '8px'}} className='p'>在上影，记录和电影相遇的时光</View> */}
          </View>
          <Image className="header-icon" src={require('@/images/mine/setting.svg')} mode="aspectFill"></Image>
        </View>:
        <View className="header-box" v-else onClick={()=>{handleToUrl('/pages/other/login/index')}}>
          <Image className="header-img" src={require('@/images/avatar.png')} mode="aspectFill"></Image>
          <View className='p'>{loginTxt}</View>
        </View>}
      </View>
      <View className="mine-wallet">
        <View className="wallet-item" onClick={()=>{
          Taro.verifyLogin()
          handleToUrl('/mineSubPack/mine-coupon/index')
        }}>
          <View className='h3'>{assets.myCoupon}</View>
          <View className='p'>优惠券</View>
        </View>
        <View className="wallet-item" onClick={()=>{handleToUrl('/mineSubPack/mine-integral/index')}}>
          <View className='h3'>{assets.myPoint}</View>
          <View className='p'>积分</View>
        </View>
        <View className="wallet-item">
          <View className='h3'>{0}</View>
          <View className='p'>红包</View>
        </View>
        <View className="wallet-item" onClick={()=>{
          Taro.verifyLogin()
          handleToUrl('/mineSubPack/card-list/index')
        }}>
          <View className='h3 dot'>{cardNum || 0}</View>
          <View className='p'>电影卡</View>
        </View>
      </View>
      {userMember.isEnabledLevel?<View className="mine-vip">
        <View className="vip-header">
          <Image src={require('@/images/mine/duotone.svg')} className='header-img'></Image>
          <View className="h2">{userMember.memberName}</View>
          <View className="header-button" onClick={()=>{
            Taro.navigateTo({
              url:'/mineSubPack/member-center/index'
            })
          }}>我的权益</View>
        </View>
        {userMember.isMember == 0?<>
        <View className="vip-process">
          <AtProgress percent={(userMember.growValue/userMember.nextGrowValue)*100} strokeWidth={4} isHidePercent color="#E2B46F" />
        </View>
        <View className="vip-span">{userMember.growRule}</View>
        </>:<View className="vip-span">{userMember.memberDateStr}</View>}
      </View>:null}
      {plusInfo.displayType>1?
      <View className="mine-plus">
        <View className="plus-header">
          <Image src={require('@/images/mine/gem.svg')} className='header-icon' mode='aspectFill' />
          {plusInfo.displayType == '3'?<>
          <View className="h2">已开通会员</View>
          <View className="sub">{plusInfo.expireDate} 到期</View>
          <View className="span" onClick={e=>{
            Taro.navigateTo({
              url:'/mineSubPack/plus-detail/index'
            })
          }}>会员中心 <View className="at-icon at-icon-chevron-right" style={{fontSize:14,marginTop:2}}></View></View>
          </>:<>
          <View className="h2">{plusInfo.memberName}</View>
          <View className="sub">{plusInfo.title}</View>
          <View className="button" onClick={e=>{
            Taro.verifyLogin()
            Taro.navigateTo({
              url:'/mineSubPack/plus-center/index'
            })
          }}>立即开通</View>
          </>}
        </View>
        {plusInfo.displayType < 3 && plusInfo.titleUrl?<Image className="plus-banner" src={plusInfo.titleUrl} mode='aspectFill'></Image>:null}
      </View>:null}
      <View className="mine-order">
        <View className="order-list" onClick={()=>{handleToOrder('')}}>
          <View className="list-item">
            <Image src={require('@/images/mine/todo.svg')} className="item-icon"></Image>
            <View className='p'>全部订单</View>
          </View>
          <View className="list-item" onClick={()=>{handleToOrder('MOVIE')}}>
            <Image src={require('@/images/mine/Movie.svg')} className="item-icon"></Image>
            <View className='p'>电影票</View>
          </View>
          <View className="list-item" onClick={()=>{handleToOrder('CINEMA_GOODS')}}>
            <Image src={require('@/images/mine/popcorn.svg')} className="item-icon"></Image>
            <View className='p'>小食卖品</View>
          </View>
          <View className="list-item" onClick={()=>{handleToOrder('SHOP')}}>
            <Image src={require('@/images/mine/shop.svg')} className="item-icon"></Image>
            <View className='p'>商城</View>
          </View>
          <View className="list-item" onClick={()=>{handleToOrder('EVENT')}}>
            <Image src={require('@/images/mine/Show.svg')} className="item-icon"></Image>
            <View className='p'>小剧场</View>
          </View>
        </View>
      </View>
      <View className="mine-tools">
        <View className="tools-item" onClick={e=>{
          Taro.navigateTo({
            url:'/giftCardSubPack/address/index'
          })
        }}>
          <View className="title">收货地址</View>
          <View className="box-flex">
            <View className="item-info">
              <View className='h2'>管理物流</View>
              <View className='h2'>收货地址</View>
              <View className="p">商城购物</View>
            </View>
            <Image src={require('@/images/mine/address.png')} className='item-icon' mode='aspectFill' />
          </View>
        </View>
        <View className="tools-item" onClick={e=>{
          Taro.navigateTo({
            url:'/mainPages/watch-list/index'
          })
        }}>
          <View className="title">常用观影人</View>
          <View className="box-flex">
            <View className="item-info">
              <View className='h2'>管理购票</View>
              <View className='h2'>实名信息</View>
              <View className="p">专场抢票</View>
            </View>
            <Image src={require('@/images/mine/moviegoers.png')} className='item-icon' mode='aspectFill' />
          </View>
        </View>
      </View>
    </View>
  )
}